<template>
	<view>
		<view class="top"
			style=" margin: 2vw; width: 96vw;box-shadow: 0 0 0 0.2vw #eee; display: flex;flex-direction: column; padding: 3vw;">
			<text>领养人：{{ditals.user_name}}</text>
			<text>状态：<text style="color: red;">{{ditals.audit_status_text}}</text></text>
			<text>手机号：{{ditals.phone}}</text>
			<text>微信：{{ditals.wechat_id}}</text>
			<text>备注：{{ditals.description}}</text>

		</view>
		<view class="main"
			style=" width: 96vw;margin-left: 2vw;  display: flex;padding: 2vw; box-shadow: 0 0 0 0.2vw #eee;">
			<image style=" width: 40vw;height: 40vh;" :src="$wanlshop.oss($wanlshop.oss(ditals.pet.pet_avatar))"
				mode="widthFix">
				<view class="right" style=" line-height: 8vw; display: flex;flex-direction: column;margin-left: 5vw;">
					<text>宠物基本信息：</text>
					<view class="main_small"
						style="display: flex;flex-direction: column;justify-content: space-evenly;">
						<text class="block ">名字：{{ditals.pet.pet_name}}</text>
						<text class="block ">性别：{{ditals.pet.pet_sex_text}}</text>

						<text class="block ">健康状态：{{ditals.pet.pet_fertility_text}}</text>
						<view class="span" style="display: flex;">
							<view class="center ml"
								style="width: 15vw; height: 5vw; font-size: 2.2vw; background-color: aquamarine;padding: 0 3vw;border-radius: 10vw;">
								{{ditals.pet.pet_drug_text}}
							</view>
							<view class="center ml"
								style="height: 5vw; width: 15vw;font-size: 2.2vw; background-color: orange;padding: 0 3vw;border-radius: 10vw;">
								{{ditals.pet.pet_vaccine_text}}
							</view>
						</view>
					</view>
				</view>

		</view>
		<view class="bottom"
			style="color: #aaa; margin-top: 2vw; line-height: 8vw; width: 96vw;margin-left: 2vw; padding: 2vw; box-shadow: 0 0 0 0.2vw #eee;">
			<view class="flex">
				<text class="block ">生日:</text>
				<text class="block ">{{ditals.pet.pet_birthday_text}}</text>
			</view>
			<view class="flex">
				<text class="block ">大小:</text>
				<text class="block ">{{ditals.pet.pet_sex}}</text>
			</view>
			<view class="flex">
				<text class="block ">体重:</text>
				<text class="block ">{{ditals.pet.pet_weight}}</text>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				ditals: {}
			}
		},
		onLoad(option) {
			this.loadData(option.id)
		},


		methods: {

			async loadData(id) {
				this.$api.get({
					url: '/wanlshop/user/adoptDetail',
					data: {
						id: id
					},
					success: res => {
						console.log(res)
						this.ditals = res;

					}
				});
			},

		}
	}
</script>

<style>
	.flex {
		display: flex;
		justify-content: space-between;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ml {
		margin: 2vw 2vw 2vw 0;
	}
</style>